<template>
  <div>
    <el-row>
      <el-form :model="queryParams" label-width="90px" ref="queryForm" :inline="true" v-show="showSearch">
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册号">
            <el-input v-model="queryParams.registerCode" placeholder="请输入注册号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学号">
            <el-input v-model="queryParams.sno" placeholder="请输入学号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在年级">
            <el-select v-model="queryParams.gradeId" filterable clearable placeholder="请选择" @change="changeGrade"
              @keyup.enter.native="search">
              <el-option v-for="item in gradeDate" :key="item.VALUE" :label="item.TITILE" :value="item.VALUE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯">
            <el-cascader v-model="queryParams.bnpCode" filterable :props="{ value: 'unitCode', currentLabels: 'label', checkStrictly: true }" clearable
              :options="options" @change="handlePlace"></el-cascader>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="性别">
            <el-select v-model="queryParams.sex" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="获奖级别">
            <el-select v-model="queryParams.awardLevel" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.basic_awads_level" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="家庭信息">
              <el-input v-model="queryParams.familyName" placeholder="请输入家庭信息" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" v-if="this.checkList.includes('民族')">
            <el-select v-model="queryParams.nation" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.bc_nation_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="this.checkList.includes('政治面貌')" label="政治面貌">
            <el-select v-model="queryParams.political" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.bc_political_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学籍状态">
            <el-select v-model="queryParams.studentStatus" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.bc_student_status" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="this.checkList.includes('生源地')" label="生源地">
            <el-input v-model="queryParams.ofStudent" placeholder="请输入生源地" clearable @keyup.enter.native="search" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="this.checkList.includes('出生日期')" label="出生日期">
            <el-date-picker v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
              style="width: 94%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="this.checkList.includes('身份证号')" label="身份证号" style="margin-left: -1.5%;">
            <el-input v-model="queryParams.cardCode" placeholder="请输入身份证号" clearable @keyup.enter.native="search" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="this.checkList.includes('报道日期')" label="报道日期" prop="joinDate">
            <el-date-picker v-model="queryParams.joinDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
              style="width: 94%"></el-date-picker>
          
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="在校状态" prop="joinDate">
            <el-select v-model="queryParams.atSchool" filterable  clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.basic_at_school" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
       
        <el-col :span="8" style="float:right;">
          <el-form-item>
            <div>
              <el-button type="primary" @click="handleAdd" size="mini">自定义筛选</el-button>
              <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addStudent"
          v-hasPermi="['basic:student:add']">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['basic:student:remove']">删除</el-button>
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="upload.open = true"
          v-hasPermi="['basic:student:import']">导入</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['basic:student:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>
    <!-- 用户导入对话框 -->
    <el-dialog title="excel导入" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="onSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="templateDownload">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入成功或失败提示信息" :visible.sync="uploadData" width="500px" append-to-body>
      <el-descriptions :column="1">
        <el-descriptions-item label="上传总数据">{{ studenData.totalSize }}条</el-descriptions-item>
        <el-descriptions-item label="成功数据">{{ studenData.successSize }}条</el-descriptions-item>
        <el-descriptions-item label="失败数据">{{ studenData.errorSize }}条</el-descriptions-item>
        <el-descriptions-item label="失败原因">
          <!-- <span v-html="studenData.failureMsg"></span> -->
          {{ studenData.errorMsg }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadData = false">取 消</el-button>
        <el-button type="primary" @click="uploadData = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="handleClose">
      <el-checkbox-group v-model="checkList1">
        <!-- <el-checkbox label="计划性质" class="checks"></el-checkbox> -->
        <el-checkbox label="民族" class="checks"></el-checkbox>
        <el-checkbox label="政治面貌" class="checks"></el-checkbox>
        <!-- <el-checkbox label="学籍状态" class="checks"></el-checkbox> -->
        <el-checkbox label="生源地" class="checks"></el-checkbox>
        <!-- <el-checkbox label="考生号" class="checks"></el-checkbox> -->
        <el-checkbox label="出生日期" class="checks"></el-checkbox>
        <el-checkbox label="身份证号" class="checks"></el-checkbox>
        <!-- <el-checkbox label="银行账号" class="checks"></el-checkbox> -->
        <el-checkbox label="报道日期" class="checks"></el-checkbox>
        <!-- <el-checkbox label="在校状态" class="checks"></el-checkbox> -->
        <!-- <el-checkbox label="注册日期" class="checks"></el-checkbox> -->
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="registerCode" label="注册号" fixed :show-overflow-tooltip="true" v-if="columns[0].visible"
        align="center" width="90"></el-table-column>
      <el-table-column prop="sno" label="学号" fixed :show-overflow-tooltip="true" v-if="columns[0].visible"
        align="center" width="110"></el-table-column>
      <!-- <el-table-column
        prop="sno"
        label="学号"
        :show-overflow-tooltip="true"
        v-if="columns[1].visible"
        align="center"
      ></el-table-column> -->
      <el-table-column prop="name" label="姓名" fixed v-if="columns[2].visible" align="center" width="90">
        <template slot-scope="scope">
          <el-button type="text" @click="handelDilog(scope.row)"> {{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" v-if="columns[3].visible" align="center" width="50">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
        </template>
      </el-table-column>
     
      <el-table-column prop="cardCode" :show-overflow-tooltip="true" label="身份证号码" v-if="columns[4].visible"
        align="center" width="150"></el-table-column>
      <el-table-column prop="nation" label="民族" v-if="columns[5].visible" align="center" width="50">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_nation_type" :value="scope.row.nation"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="出生日期" :show-overflow-tooltip="true" v-if="columns[6].visible" align="center"
        width="90"></el-table-column>
      <el-table-column prop="bnpName" label="籍贯" v-if="columns[7].visible" align="center" width="90" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="political" label="政治面貌" v-if="columns[8].visible" align="center"
        :show-overflow-tooltip="true" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_political_type" :value="scope.row.political"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deptNames" :show-overflow-tooltip="true" label="所在院部" v-if="columns[9].visible"
        align="center"></el-table-column>
      <el-table-column prop="specialityName" :show-overflow-tooltip="true" label="专业" v-if="columns[10].visible"
        align="center"></el-table-column>
      <el-table-column prop="className" label="班级" :show-overflow-tooltip="true" v-if="columns[11].visible" align="center"></el-table-column>
      <el-table-column prop="gradeName" label="年级" :show-overflow-tooltip="true" v-if="columns[12].visible" align="center"></el-table-column>
      <el-table-column prop="joinDate" :show-overflow-tooltip="true" v-if="columns[13].visible" label="入学时间" align="center"></el-table-column>
      <el-table-column prop="guaduateDate" :show-overflow-tooltip="true" v-if="columns[14].visible" label="毕业时间" align="center"></el-table-column>
      <el-table-column prop="studentType" :show-overflow-tooltip="true" v-if="columns[15].visible" label="学生类型" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_student_type" :value="scope.row.studentType"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="schoolEmail" v-if="columns[16].visible" :show-overflow-tooltip="true" label="校园Email"
        align="center"></el-table-column>
      <el-table-column prop="email" v-if="columns[17].visible" :show-overflow-tooltip="true" label="常用Email"
        align="center"></el-table-column>
      <el-table-column prop="houseNo" v-if="columns[18].visible" label="楼号" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="roomNo" v-if="columns[19].visible" label="宿舍号" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="qq" v-if="columns[20].visible" label="qq号" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="wechatCode" v-if="columns[21].visible" label="微信" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="mobile" v-if="columns[22].visible" label="联系电话" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="healthStatus" v-if="columns[23].visible" label="健康状况" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_health_status" :value="scope.row.healthStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="studentStatus" v-if="columns[24].visible" label="学籍状态" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_student_status" :value="scope.row.studentStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ofStudent" v-if="columns[25].visible" label="生源地" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="highSchool" v-if="columns[26].visible" label="毕业高中" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="nodeType" v-if="columns[27].visible" label="入学前户口类别" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_node_type" :value="scope.row.nodeType"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="religion" v-if="columns[28].visible" label="宗教信仰" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="residence" v-if="columns[29].visible" label="户籍所在地" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="followStatus" v-if="columns[30].visible" label="是否重点关注对象" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.follow_status" :value="scope.row.followStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column prop="followReson" v-if="columns[31].visible" label="关注原因" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="followDisposal" v-if="columns[32].visible" label="关注处理方式" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="emergencyContact" v-if="columns[33].visible" label="紧急联系人" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="emergencyMobile" v-if="columns[34].visible" label="紧急联系人电话" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="teacherId" v-if="columns[35].visible" label="辅导员姓名" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="address" v-if="columns[36].visible" label="辅导员电话" align="center"></el-table-column>
      <el-table-column prop="atSchool" label="在校状态" v-if="columns[37].visible" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.basic_at_school" :value="scope.row.atSchool"></dict-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="350px" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:student:edit']">修改</el-button>
          <el-button size="mini" type="text" @click="familyDetails(scope.row)">家庭信息</el-button>
          <el-button size="mini" type="text" @click="achievement(scope.row)">学习成绩</el-button>
          <el-button size="mini" type="text" @click="payment(scope.row)">缴费状态</el-button>
          <el-button size="mini" type="text" @click="viewDetails(scope.row)"  v-hasPermi="['basic:student:query']">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 家庭成员详情 -->
    <el-dialog :title="title" :visible.sync="familyVisible" width="80%" append-to-body :before-close="handleClose">
      <el-button @click.prevent="addRow()">添加</el-button>
      <el-form :model="familyList" :rules="familyRules" ref="familyForm">
        <el-table :data="familyList.datas" border style="width: 100%">
          <el-table-column prop="reasonStatus" label="与本人关系" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">
                <dict-tag :options="dict.type.bc_student_famliy" :value="scope.row.reasonStatus"></dict-tag>
              </template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.reasonStatus'" :rules="familyRules.reasonStatus">
                  <!-- <el-input size="mini" v-model.trim="scope.row.name" style="width: 120px;"></el-input> -->
                  <el-select v-model="scope.row.reasonStatus" placeholder="请选择">
                    <el-option v-for="dict in dict.type.bc_student_famliy" :key="dict.value" :label="dict.label"
                      :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">{{ scope.row.name }}</template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.name'" :rules="familyRules.name">
                  <el-input size="mini" v-model.number="scope.row.name" maxlength="10"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="familyMobile" label="联系方式" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">{{ scope.row.familyMobile }}</template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.familyMobile'" :rules="familyRules.familyMobile">
                  <el-input size="mini" v-model.number="scope.row.familyMobile" maxlength="11"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="wechatCode" label="微信号" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">{{ scope.row.wechatCode }}</template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.wechatCode'" :rules="familyRules.wechatCode">
                  <el-input size="mini" v-model="scope.row.wechatCode" maxlength="35"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="工作单位" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">{{ scope.row.unit }}</template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.unit'" :rules="familyRules.unit">
                  <el-input size="mini" v-model.number="scope.row.unit" maxlength="15"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="duties" label="职务" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">{{ scope.row.duties }}</template>
              <template v-else>
                <el-form-item :prop="'datas.' + scope.$index + '.duties'" :rules="familyRules.duties">
                  <el-input size="mini" v-model.number="scope.row.duties" maxlength="15"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="operation" label="操作" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.action == 'view'">
                <el-button size="mini" @click="click_edit(scope.row, scope.$index)">编辑</el-button>
                <el-button size="mini" @click="click_delete(scope.row, scope.$index)">删除</el-button>
              </template>
              <template v-else-if="scope.row.action == 'add'">
                <el-button size="mini" @click="click_add(scope.row, scope.$index)">新增</el-button>
                <el-button size="mini" @click="click_reset(scope.row, scope.$index)">重置</el-button>
              </template>
              <template v-else>
                <el-button size="mini" @click="click_save(scope.row, scope.$index)">保存</el-button>
                <el-button size="mini" @click="click_cancle(scope.row, scope.$index)">取消</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <table class="default-table" align="center" border="1" width="100%" height="100%" cellspacing="0">
          <tr align="center" height="50px" cellspacing="0">
            <td>家庭邮编</td>
            <td>
              <el-input v-model="postalCode" placeholder="请输入家庭邮编" maxlength="6" :disabled="familyDisbaled"></el-input>
            </td>
            <td>家庭联系地址</td>
            <td>
              <el-input v-model="familyAddress" placeholder="请输入家庭联系地址" :disabled="familyDisbaled" />

            </td>
          </tr>
          <tr align="center">
            <td align="center">家庭情况备注</td>
            <td colspan="5">
              <el-input v-model="familyRemark" placeholder="请输入家庭情况备注" :disabled="familyDisbaled" />
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="familySubmit" :disabled="family">确 定</el-button>
        <el-button @click="familyVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增/修改弹窗 -->
    <studentInfors ref="saveDialog" :deptOptions="deptOptions"  :options="options" @saveSuccess="submit" :title="title" :forms="form">
    </studentInfors>
    <!-- 学习成绩弹窗 -->
    <el-dialog title="学习成绩" :visible.sync="gradeModify" :before-close="gradeForm">
      <el-form ref="grade" v-model="grade" :inline="true" label-width="80px">
        <el-form-item label="学年">
          <el-date-picker type="year" v-model="grade.startTime" value-format="yyyy" placeholder="请选择"
            style="width: 100px;" />-
          <el-date-picker type="year" v-model="grade.endTime" value-format="yyyy" placeholder="请选择"
            style="width: 100px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="gradeQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="gradeReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="gradeList">
        <el-table-column label="注册号" prop="zch" align="center" />
        <el-table-column label="班级排名" prop="bjpm" align="center" />
        <el-table-column label="文化课最低分" prop="whkzdf" align="center" />
        <el-table-column label="平均成绩" prop="pjcj" align="center" />
      </el-table>
    </el-dialog>
    <!-- 缴费情况弹框 -->
    <el-dialog title="缴费情况" :visible.sync="payModify" :before-close="closeForm">
      <el-form ref="grade" :model="pay" :inline="true" label-width="80px">
        <el-form-item label="缴费年份">
          <el-date-picker type="year" v-model="pay.payYear" value-format="yyyy" placeholder="请选择" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="payQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="payReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="payList">
        <el-table-column label="注册号" prop="zch" align="center" />
        <el-table-column label="姓名" prop="xm" align="center" />
        <el-table-column label="缴费年份" prop="jfnf" align="center" />
        <el-table-column label="书费标准" prop="sf" align="center" />
        <el-table-column label="已交书费" prop="yjsf" align="center" />
        <el-table-column label="住宿费标准" prop="zsf" align="center" />
        <el-table-column label="已交住宿费" prop="yjzsf" align="center" />
        <el-table-column label="住宿费缴费状态" prop="zsfjfzt" align="center" />
        <el-table-column label="缴费状态" prop="jfzt" align="center" />
      </el-table>
    </el-dialog>
    <el-dialog
      title="学生信息卡片"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <!-- <div class="card">
        <el-image
          class="card-img"
          :src="student.avatar"
          alt="照片"
          :preview-src-list="[student.photo]"
        />
        <div class="card-content">
          <p>注册号：{{ student.registerCode }}</p>
          <p>姓名：{{ student.name }}</p>
          <p>性别：{{ student.sex == 0? '男': '女' }}</p>
          <p>院系：{{ student.deptNames }}</p>
          <p>专业：{{ student.specialityName }}</p>
          <p>年级：{{ student.gradeName }}</p>
          <p>班级：{{ student.className }}</p>
      
        </div>
      </div> -->
      <el-row :gutter="20">
          <el-col :span="16">
            <el-descriptions :column="2" size="small" border>
              <el-descriptions-item label="注册号">
                <el-tag size="small">{{ student.registerCode }}</el-tag>
              </el-descriptions-item>
               <el-descriptions-item label="姓名">{{ student.name }}</el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-tag 
                  :type="student.sex == 0? '男': '女'" 
                  size="small"
                >
                  {{student.sex == 0? '男': '女'}}
                </el-tag>
              </el-descriptions-item>
             
              <el-descriptions-item label="院系">{{ student.deptNames }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{ student.specialityName }}</el-descriptions-item>
              <el-descriptions-item label="年级">{{ student.gradeName }}</el-descriptions-item>
              <el-descriptions-item label="班级">{{ student.className }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
           <el-col :span="8">
            <div class="detail-avatar">
              <el-avatar :size="150" :src="student.avatar"></el-avatar>
            </div>
          </el-col>
        </el-row>
    </el-dialog>

    <!-- 用户导出弹窗 -->
    <el-dialog title="导出" class="exportDlg" :visible.sync="exportVisible" width="520px">
      <el-form ref="exportRef" :model="exportParams" :rules="exportRules" label-width="120px">
        <el-form-item label="页码" prop="pageNum">
          <el-input-number v-model="exportParams.pageNum" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <p style="padding-left: 82px;">
        注：根据页码导出对应数据条数，每页最多导出5000条；
        <br />例：页面输入2则导出5001~10000之间的数据；
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadStudentInfo">确 定</el-button>
        <el-button @click="exportVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <studentsIndex
      ref="stuapply"
      :deptOptions="deptOptions"
    >
    </studentsIndex>
  </div>
</template>

<script>
import {
  studentList,
  addstudent,
  updataDuties,
  studentInfor,
  getStudentScore,
  scoreList,
  familyList,
  getFamilyInfo,
  AddFamily,
  importTemplate,
  familyBatch,
  delStudent,
  delFamily,
  getStudentBayList,
  classTree
} from "@/api/information/studentInfor";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getGradeSelect } from "@/api/information/gradeInfor";
import { getClassSelect, getProvinceTree,addersTree } from "@/api/information/classInfor";
import uploadImg from "@/components/ImageUpload/imageIndex";
import { getToken } from "@/utils/auth";
import Validators from "@/utils/validate.js";
import studentInfors from "@/views/components/student/index";
import studentsIndex from "./componets/studentsIndex.vue";
import axios from "axios";
export default {
  props: {
    deptOptions: {
      type: Array,
      default: function () {
        return [];
      },
      deptStudentId: {
        type: String
      }
    }
  },
  components: { uploadImg, studentInfors,studentsIndex },
  dicts: [
    "bc_student_status", // 学籍状态
    "bc_political_type", // 政治面貌
    "bc_nation_type", // 民族
    "bc_student_type", // 学生类型
    "bc_node_type", // 入学前户口类别
    "follow_status", // 是否关注对象
    "sys_user_sex", // 性别
    "bc_student_famliy", // 家庭关系
    "basic_at_school", // 是否在校
    "basic_awads_level", // 获奖级别
    "bc_health_status" // 健康状态
  ],
  data() {
    return {
      showEdit: [], // 控制显示及隐藏
      family: true, // 家庭信息确定按钮
      familyDisbaled: false, // 家庭信息住址
      open: false,
      ialogVisible: true,
      familyVisible: false,
      // 导入弹框
      uploadVisible: false,
      uploadData: false, // 提示信息弹框
      studenData: {}, //提示返回值
      modify: false,
      actionUrl: process.env.VUE_APP_BASE_API + "/basic/student/importStudent", // 上传地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/basic/student/importStudent"
      },
      // updateSupport: true, //上传参数
      queryParams: {
        value1: [],
        class: "",
        studentNumber: "",
        status: "",
        dataBirth: "",
        deptId: "",
        gradeId: "",
        pageNum: 1,
        pageSize: 10,
        studentStatus: 'C',
        atSchool: 'A'

      },
      options: [],

      // 获取专业数据
      profession: [],
      // 获取年级下拉数据
      gradeDate: [],
      // 获取班级下拉数据
      classList: [],
      showSearch: true,
      checkList: [],
      checkList1: [],
      tableData: [],
      familyList: {
        datas: []
      },
      familyRules: {
        reasonStatus: [
          { required: true, message: "请选择", trigger: "change" }
        ],
        name: [
          {
            required: true,
            text: "请输入姓名",
            validator: Validators.isString,
            trigger: "blur"
          }
        ],
        familyMobile: [
          {
            required: true,
            text: "请输入联系方式",
            validator: Validators.isPhone,
            trigger: "blur"
          }
        ],
        wechatCode: [
          {
            required: true,
            text: "请输入微信号",
            validator: Validators.istext,
            trigger: "blur"
          }
        ],
        unit: [
          {
            required: true,
            text: "请输入工作单位",
            validator: Validators.isString,
            trigger: "blur"
          }
        ],
        duties: [
          {
            required: true,
            text: "请输入职务",
            validator: Validators.isString,
            trigger: "blur"
          }
        ]
      },
      familyListLength: 0, // 家庭信息成员列表默认长度
      tableData1: [],
      form: {
        avatar: undefined,
        name: undefined
      },
      title: "",
      // 列信息
      columns: [
        { key: 0, label: `注册号`, visible: true },
        { key: 1, label: `学号`, visible: true },
        { key: 2, label: `姓名`, visible: true },
        { key: 3, label: `性别`, visible: true },
        { key: 4, label: `身份证号码`, visible: true },
        { key: 5, label: `民族`, visible: true },
        { key: 6, label: `出生日期`, visible: true },
        { key: 7, label: `籍贯`, visible: true },
        { key: 8, label: `政治面貌`, visible: true },
        { key: 9, label: `所在院部`, visible: true },
        { key: 10, label: `专业`, visible: false },
        { key: 11, label: `班级`, visible: false },
        { key: 12, label: `年级`, visible: false },
        { key: 13, label: `入学时间`, visible: false },
        { key: 14, label: `毕业时间`, visible: false },
        { key: 15, label: `学生类型`, visible: false },
        { key: 16, label: `校内Email`, visible: false },
        { key: 17, label: `常用Email`, visible: false },
        { key: 18, label: `楼号`, visible: false },
        { key: 19, label: `宿舍号`, visible: false },
        { key: 20, label: `qq号`, visible: false },
        { key: 21, label: `微信`, visible: false },
        { key: 22, label: `联系电话`, visible: false },
        { key: 23, label: `健康状态`, visible: false },
        { key: 24, label: `学籍状态`, visible: true },
        { key: 25, label: `生源地`, visible: false },
        { key: 26, label: `毕业高中`, visible: false },
        { key: 27, label: `入学前户口类型`, visible: false },
        { key: 28, label: `宗教信仰`, visible: false },
        { key: 29, label: `户籍所在地`, visible: false },
        { key: 30, label: `是否重点关注对象`, visible: false },
        { key: 31, label: `关注原因`, visible: false },
        { key: 32, label: `关注处理方式`, visible: false },
        { key: 33, label: `紧急联系人`, visible: false },
        { key: 34, label: `紧急联系人电话`, visible: false },
        { key: 35, label: `辅导员`, visible: false },
        { key: 36, label: `辅导员电话`, visible: false },
        { key: 37, label: `在校状态`, visible: true }
      ],
      familyRemark: "",
      dialogVisible: false, // 卡片弹窗
      student: {},
      familyAddress: "",
      postalCode: "",
      // 学生成绩查询
      grade: {
        startTime: "",
        endTime: ""
      },
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      name: "", // 学生姓名
      // 学习成绩弹窗
      gradeModify: false,
      gradeList: [],
      // 缴费弹框
      payModify: false,
      // 缴费表格数据
      payList: [],
      total: 0,
      studentId: "", // 学生ID
      pay: {
        payYear: ""
      },
      exportParams: {
        pageNum: 1,
        pageSize: 5000
      },
      exportVisible: false,
      exportRules: {
        pageNum: [
          {
            required: true,
            message: "请输入页码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getGradeInfor();
    this.getTree()
    
  },

  methods: {
    handelDilog(data){
      this.dialogVisible = true
      this.student = data
    },
    // 籍贯选择赋值
    handlePlace(data) {
      // this.queryParams.nativePlace = data[data.length - 1]
      this.queryParams.bnpCode = data[data.length - 1]
    },
    // 籍贯下拉书
    getTree() {
      // 部门下拉树
      getProvinceTree().then(response => {
        this.options = response.data;
      });
     
    },
    /** 查询用户列表 */
    getList(name) {
      this.loading = true;
      if (typeof name == "number") {
        this.queryParams.deptId = name;
      }
      studentList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查看详情
    viewDetails(row){

       this.$refs.stuapply.examineDialog(row.id)
      
    },
    // 成绩查询
    gradeQuery() {
      this.gradeList = [];
      if (this.grade.startTime && this.grade.endTime) {
        const xtnf = this.grade.startTime + "-" + this.grade.endTime;
        getStudentScore(this.zch, xtnf).then(res => {
          this.gradeList.push(res.data);
          // this.total = response.total;
        });
      } else {
        this.$modal.msgError("请选择时间");
      }
    },
    // 重置成绩年份
    gradeReset() {
      this.grade.startTime = "";
      this.grade.endTime = "";
    },
    // 重置缴费
    payReset() {
      this.pay.payYear = "";
    },
    gradeForm() {
      this.gradeList = [];
      this.gradeModify = false;
    },
    closeForm() {
      this.payList = [];
      this.payModify = false;
    },
    // 缴费信息
    async payQuery() {
      this.payList = [];
      if (this.pay.payYear) {
        let res = await getStudentBayList(this.zch, this.pay.payYear)
        if (res.code == 200) {
          this.payList.push(res.data);
          this.$modal.msgSuccess(res.msg);
        }
      } else {
        this.$modal.msgError("请选择时间");
      }
    },
    // 缴费状态按钮
    payment(row) {
      this.payModify = true;
      this.pay.payYear = [];
      this.zch = row.registerCode;
    },
    // 点击修改
    showUpdate(index, row) {
      console.log(index, "index");
      this.showEdit[index] = true;
      this.$set(this.showEdit, index, true); // 这里要用$set方法，否则页面状态不更新
    },
    handleAdd() {
      this.title = "自定义筛选";
      this.open = true;
    },
    imageUrl(data) {
      this.form.avatar = data;
    },
    // 添加学生信息弹窗
    addStudent() {
      this.title = "添加学生信息";
      // this.modify = true;
      this.$refs.saveDialog.openDia();
      this.$refs.saveDialog.getGradeInfor();
      // this.getGradeInfor();
    },
    getGradeInfor() {
      getGradeSelect().then(response => {
        // console.log(response, "Student");
        this.gradeDate = response.data;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.search();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    determine() {
      this.checkList = this.checkList1;
      this.open = false;
    },
    cancel() {
      this.checkList1 = this.checkList;
      this.open = false;
    },
    // 模板下载
    templateDownload() {
      importTemplate().then(response => {
        // console.log(response, "模板下载");
        this.saveAs(
          new Blob([response], {
            type: "application/vnd.ms-excel;charset=utf-8"
          }),
          `学生信息模板_${new Date().getFullYear()}-${new Date().getMonth() +
          1}-${new Date().getDate()}`
        );
      });
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        // "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        // response.data  +
        // "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.id || this.ids;
      this.name = row.name || this.name;
      this.$modal
        .confirm('是否确认删除学生姓名"' + this.name + '"的数据项？')
        .then(function () {
          return delStudent(roleIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    saveAs(obj, fileName) {
      let ele = document.createElement("a");
      ele.download = fileName || "下载"; //下载文件名
      ele.href = URL.createObjectURL(obj); // 绑定a标签
      ele.style.display = "none";
      document.body.appendChild(ele); // 兼容火狐浏览器
      ele.click();
      setTimeout(function () {
        // 延时释放
        URL.revokeObjectURL(obj); // 用 URL.revokeObjectURL() 来释放这个object URL
        document.body.removeChild(ele); // 兼容火狐浏览器
      }, 100);
    },
    // 查询
    search() {
      this.getList();
    },
    // 新增或修改取消按钮
    studentCancel() {
      this.form = {};
      this.modify = false;
    },
    // 家庭成员详情
    familyDetails(row) {
      this.title = "家庭成员详情";
      this.studentId = row.id;
      this.familyVisible = true;
      this.familyInfo();
      this.getFamilyTree();
    },
    getFamilyTree() {
      addersTree().then(res => {
        console.log(res,'获取家庭信息')
      })
    },
    // 根据id获取家庭成员
    familyInfo() {
      this.familyRemark = "";
      this.familyAddress = "";
      this.postalCode = "";
      getFamilyInfo(this.studentId).then(res => {
        console.log(res, "根据id获取家庭成员");
        this.familyList.datas = res.data;
        this.familyListLength = res.data.length;
        this.familyList.datas.map(item => {
          this.$set(item, "action", "view");
          return item;
        });
        if (res.data.length == 0) {
          this.familyDisbaled = false;
        } else {
          this.familyDisbaled = true;
          this.familyRemark = res.data[0].familyRemark;
          this.familyAddress = res.data[0].familyAddress;
          this.postalCode = res.data[0].postalCode;
        }
      });
    },
    //编辑操作
    click_edit(item, index) {
      item.action = "edit";
    },
    //编辑-保存操作
    click_save(item, index) {
      this.$refs["familyForm"].validate(valid => {
        if (valid) {
          item.action = "view";
          this.family = false;
        } else {
          this.$modal.msgError("请填写正确的信息");
          return false;
        }
      });
    },
    // 清除表单
    CloseIn() {
      this.form = {};
      this.modify = false;
    },
    //编辑-取消操作
    click_cancle(item, index) {
      this.$refs["familyForm"].validate(valid => {
        if (valid) {
          item.action = "view";
          this.family = false;
        } else {
          this.$modal.msgError("请填写正确的信息");
          return false;
        }
      });
    },
    //删除操作
    click_delete(item, index) {
      this.$confirm("确定删除该条数据(" + item.name + ")吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //模拟删除一条数据
          delFamily(item.id).then(() => {
            this.familyInfo();
          });
          this.familyList.datas.splice(index, 1);
          this.console.log(this.familyList.datas);
        })
        .catch(() => { });
    },
    // 增加行（家庭成员信息）
    addRow() {
      var list = {};
      list.reasonStatus = "";
      list.name = "";
      list.familyMobile = "";
      list.wechatCode = "";
      list.unit = "";
      list.duties = "";
      list.action = "edit";
      list.studentId = this.studentId;
      this.familyList.datas.push(list);
    },
    // 提交修改
    submitList(index, row) {
      console.log(index, "123");
      this.$set(this.showEdit, index, false); //
      // 发送请求，隐藏输入框
      this.$message({
        type: "success",
        message: "已缓存，记得点击保存提交修改喔！",
        duration: 888,
        onClose: () => {
          this.$set(this.showEdit, index, false); // vue添加属性的方法
          this.family = false;
        }
      });
    },
    // 提交家庭信息
    familySubmit() {
      this.familyList.datas = this.familyList.datas.map((item, index) => {
        return {
          ...item,
          postalCode: this.postalCode,
          familyAddress: this.familyAddress,
          familyRemark: this.familyRemark
        };
      });
      this.familyList.datas.splice(0, this.familyListLength);
      // axios.post("process.env.VUE_APP_BASE_API//basic/family/batch", {
      //   headers: {
      //     Authorization: "Bearer " +  getToken()
      //   },
      //   data:{ list: this.familyList.datas }
      // }).then(res => {
      //   console.log(res, "family111111111111");
      // })
      axios({
        headers: {
          Authorization: "Bearer " + getToken()
        },
        url: process.env.VUE_APP_BASE_API + "/basic/family/batch",
        method: "POST",
        data: { list: this.familyList.datas }
      }).then(res => {
        if (res.data.code == 200) {
          this.family = true;
          this.familyDisbaled = true;
          this.$modal.msgSuccess("添加成功");
           this.familyVisible = false;
          this.familyInfo();
        } else {
          this.$modal.msgError(res.data.msg);
          this.familyVisible = false;
        }
      });
    },
    // 取消修改
    cancelUpdate(index) {
      this.$confirm("取消修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$set(this.showEdit, index, false);
        })
        .catch(() => { });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.name = selection.map(item => item.name);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 修改弹窗
    async handleUpdate(row) {
      const roleId = row.id || this.ids;
      await studentInfor(roleId).then(response => {
        this.form = response.data;
        console.log(this.form, '传递的数据')
        this.$refs.saveDialog.openDia();
        this.title = "修改学生信息";
      });
    },
    // 下拉树选择
    handleChange(value) {
      if (typeof value == "object") {
        this.form.deptId = value[value.length - 1];
        this.queryParams.deptId = value[value.length - 1];
        this.getSpeciality();
      } else if (typeof value == "number") {
        this.form.deptId = value;
        this.getSpeciality();
      } else if (value == undefined) {
        this.form.specialityId = "";
      }
    },
    getSpeciality() {
      if (this.form.deptId) {
        getSpecialityByDeptId({ deptId: this.form.deptId }).then(res => {
          if (res.code == "200") {
            this.profession = res.data;
          } else {
            console.log("123");
            this.profession = [];
          }
        });
      } else {
        this.profession = [];
      }
    },
    // 获取班级拉下树
    changeGrade(value) {
      if (
        (this.form.specialityId && this.form.gradeId) ||
        (this.queryParams.gradeId && this.queryParams.specialityId)
      ) {
        getClassSelect({
          gradeId: this.form.gradeId || this.queryParams.gradeId,
          specialtyId: this.form.specialityId || this.queryParams.specialityId
        }).then(res => {
          this.classList = res.data;
        });
      } else {
        if (!value) {
          this.classList = [];
          this.form.classId = "";
        }
      }
    },
    // 提交
    submit(data) {
      console.log(data, "传递的学生信息值");
      if (data.id != undefined) {
        // this.$emit("saveSuccess", this.form);
        updataDuties(data).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.form = {};
          this.$refs.saveDialog.closeDia();
          this.getList();
        });
      } else {
        addstudent(data).then(response => {
          console.log(response, "新增成功");
          this.$modal.msgSuccess("新增成功");
          this.form = {};
          this.$refs.saveDialog.closeDia();
          this.getList();
        });
      }
      console.log(this.form, "表单");
    },
    // 上传预处理
    beforeUpload(file) {
      const File = file.name.replace(/.+\./, "");
      if (["xlsx", "xls"].indexOf(File.toLowerCase()) === -1) {
        this.$message.error("只支持上传xlsx、xls文件格式!");
        this.$refs.upload.clearFiles();
        return false;
      }
    },
    // 点击确定上传文件按钮
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件上传成功
    onSuccess(response) {
      if (response.code == 200) {
        this.$message.success("文件上传成功");
        this.studenData = response.data;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.upload.open = false;
        this.uploadData = true;
        this.getList();
      } else {
        this.studenData = response.data;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.upload.open = false;
        this.uploadData = true;
        this.$message.error("文件上传失败");
        // this.getList();
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.exportVisible = true;
    },
    downloadStudentInfo() {
      this.$refs.exportRef.validate(valid => {
        if (valid) {
          this.download(
            "/basic/student/export",
            {
              ...this.queryParams,
              ...this.exportParams
            },
            `学生信息_${new Date().getFullYear()}-${new Date().getMonth() +
            1}-${new Date().getDate()}.xlsx`
          );
          this.exportVisible = false;
        } else {
          return false;
        }
      });
    },
    // 学习成绩
    achievement(row) {
      this.gradeModify = true;
      this.zch = row.registerCode;
      this.grade.startTime = "";
      this.grade.endTime = "";
      // getStudentScore(row.registerCode,this.grade.years).then(res => {
      //   console.log(res, "xuesheng");
      //   this.tableData = response.rows;
      //   this.total = response.total;
      // });
      // console.log(this.grade);
    }
  },
  mounthed() { }
};
</script>

<style scoped>
.checks {
  width: 22%;
}

.formItem {
  margin-top: 12px;
  margin-bottom: 12px;
}

.elSelect {
  width: 100%;
}
.card {
  display: flex;
  align-items: center;
}

.card-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.card-content p {
  margin: 5px 0;
}
.student-app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', Arial, sans-serif;
}

.app-header {
  background: linear-gradient(135deg, #409EFF, #67C23A);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  color: white;
  font-size: 24px;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.student-container {
  padding: 20px;
}

.student-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border-radius: 8px;
}

.student-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 20px;
  display: flex;
  align-items: center;
}

.student-avatar {
  margin-right: 15px;
}

.student-info {
  flex: 1;
}

.student-name {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #303133;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.student-name:hover {
  color: #409EFF;
}

.student-meta {
  margin: 5px 0;
  font-size: 13px;
  color: #909399;
}

.student-detail {
  padding: 10px;
}

.detail-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .student-name {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .student-name .el-tag {
    margin-top: 5px;
  }
}
</style>